<template>
    <div>
        <input class="login-input mb-4" type="text" v-model="formData.username" placeholder="请输入账号">
        <input class="login-input mb-4" type="text" v-model="formData.password" placeholder="请输入密码">
        <input class="login-input mb-4" type="text" v-model="formData.captcha" placeholder="请输入密码">
        <input class="login-input mb-4" type="text" v-model="formData.key" placeholder="请输入验证码">
        <button class="login-button mb-4" type="button" @click="onLogin" :disabled="loading">{{ loading ? '登录中...' : '登录' }}</button>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import type {R} from '@/api/type'
import {useRouter} from 'vue-router'
import AuthorizeApi from '@/api/authorize'
import {getDynamicRoute} from '@/util/authorize'
import LocalStorageKey from '@/constant/storage-key'

let router = useRouter()
// 正在加载
const loading = ref(false)
// 表单数据
const formData = ref({
    username: 'admin',
    password: '123456',
    captcha: 'H7WQ',
    key: '70abbbe67b33488286a1bb21749d870a'
})

/**
 * 点击登录
 */
async function onLogin() {
    try {
        loading.value = true

        console.info('1.执行登录并且保存TOKEN')
        let login: R<string> = await AuthorizeApi.login(formData.value)
        localStorage.setItem(LocalStorageKey.USER_TOKEN, login?.data || '')

        await getDynamicRoute()

        await router.push('/')
    } catch (error) {
        console.error(error)
    } finally {
        loading.value = false
    }
}
</script>

<style scoped>
.login-input,
.login-button {
    display: block;
    width: 100%;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    color: #1f2d3d;
    height: 38px;
    line-height: 38px;
    font-size: 1rem;
    padding: 0 1rem;
    outline: none;
    transition: 0.2s all;
}
</style>
